<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台界面</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <!--轮播走马灯-->
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__container{
            height: 500px;
        }
    </style>


    <!--分类内容样式-->
    <link rel="stylesheet" href="../../plugins/swiper/swiper-bundle.min.css">
    <script src="../../plugins/swiper/swiper-bundle.min.js"></script>

    <style>
        @charset "utf-8";
        /* CSS Document */
        body{
            padding: 0;
            margin: 0;
        }
        #carousel {
            position: relative;
            width: 1200px;
            margin: 0 auto
        }

        #carousel .swiper {
            padding-top: 20px;
            padding-bottom: 40px;
        }
        #carousel .swiper-wrapper{

        }
        #carousel  .swiper-slide {
            width: 300px;
            background: #fff;
            box-shadow: 0 8px 20px #ddd;


        }
        #carousel  .swiper-slide img{
            display:block;
            width: 100%;
        }
        #carousel  .swiper-slide p {
            line-height: 58px;
            padding-top: 0;
            text-align: center;
            color: #636363;
            font-size: 0.8em;
            margin: 0;
        }

        #carousel .swiper-pagination {
            width: 100%;
            bottom: 20px;
        }

        #carousel .swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 0 5px;
            background-color: #e8f5ff;
            width: 20px;
            height: 10px;
            opacity: 1;
            border-radius: 5px;
        }

        #carousel .swiper-pagination-bullets .swiper-pagination-bullet-active {
            background-color: #3eb2f3;
            width: 35px;
        }

        #carousel .swiper-button-prev {
            left: -30px;
            width: 45px;
            height: 45px;
            background: url(../img/images/wm_button_icon.png) no-repeat;
            background-position: 0 0;
            background-size: 100%;
        }

        #carousel .swiper-button-prev:hover {
            background-position: 0 -46px;
            background-size: 100%
        }

        #carousel .swiper-button-next {
            right: -30px;
            width: 45px;
            height: 45px;
            background: url(../img/images/wm_button_icon.png) no-repeat;
            background-position: 0 -93px;
            background-size: 100%;
        }

        #carousel .swiper-button-next:hover {
            background-position: 0 -139px;
            background-size: 100%
        }
        #carousel .swiper-button-prev::after,#carousel .swiper-button-next::after{
            content: '';
        }
    </style>
    <style>
        .button:active{
            color:greenyellow;
        }
        .button:focus{
            color:red;
        }


    </style>

</head>
<body>
<div id="app">

    <!--1.导航栏-->
    <div style="z-index: 999;position:fixed;width: 100%">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)" style="margin-left: 200px">首页</el-menu-item>
            <el-menu-item index="2" @click="url(2)">个人订单信息</el-menu-item>
            <el-menu-item index="3" @click="url(3)">个人信息</el-menu-item>

            <el-submenu index="6"  style="margin-left: 400px">
                <template slot="title"><i class="el-icon-user"></i></template>
                <el-menu-item index="6-2" @click="url(4)">退出登录</el-menu-item>
            </el-submenu>


        </el-menu>
    </div>

<!--   注： 这个盒子的作用是把轮播图给顶到下面去，避免导航栏position的fixed属性将轮播图给覆盖-->
    <div style="width: 100%;height:58px "></div>
    <!--2.轮播图-->
   <div>
       <template>
           <el-carousel indicator-position="outside">
               <el-carousel-item v-for="item in options" :key="item">
                   <div style="position: absolute;
                        width: 1500px;
                        height: 100px;
                        background: rgba(0, 0, .2, .5);margin: 400px 0 0 0">
                       <span style="color: red;font-size: 20px">{{ item.contents }}</span>
                   </div>
                   <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                        :preview-src-list=" `/files/downloadFile?name=${item.image}` "
                        :src="getImage(item.image)"
                   />
                   <img style=" width: 1500px;height: 500px;margin-top: -20px" :src="imageUrl1" class="image">

               </el-carousel-item>
           </el-carousel>
       </template>
   </div>


    <!--分类内容-->

    <div :span="8"  v-for="item in items1" >

        <h1 style="margin: 20px 0 10px 700px">{{item.type}}</h1>
        <div id="carousel" >
            <div class="swiper swiper-3d">
                <div class="swiper-wrapper">

                    <div class="swiper-slide" v-for="item2 in item.natatoriumList">
                        <a @click="toDetails(item2.id)">
                            <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                                 :preview-src-list=" `/files/downloadFile?name=${item2.image}` "
                                 :src="getImage(item2.image)"
                            />
                            <img style="width: 330px;height: 250px;margin-top: -20px" :src="imageUrl1" class="image">
                        </a>
                        <p>{{item2.name}}</p>
                    </div>

                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>



</div>


<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            userInfo:{},

            items1:[{1:1},{1:1},{1:1},{1:1},{1:1},{1:1},],
            items2:[],


        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)

            this.getAll()

        },
        methods:{
            url(code){
                if (code==1){
                    window.location.href='index.html';
                }else  if (code==2){
                    window.location.href='ordersMyself.html';
                }else  if (code==3){
                    window.location.href='updateMyself.html';
                }else  if (code==4){
                    window.location.href='../login/UserLogin.html';
                }
            },

            getAll(){
                axios.get("/natatoriums/getAllNatatoriumByType").then((res)=>{
                    console.log("res1:")
                    console.log(res)
                    this.items1=res.data.data
                })

                // axios.get("/posts/getAllPostByjobType").then((res)=>{
                //     this.items2=res.data.data
                //     console.log("items2:")
                //     console.log(this.items2)
                // })

                // 轮播图
                axios.get("/carousels/getAllCarousel").then((res)=>{
                    this.options=res.data.data
                })


            },
            toDetails(id){
                window.location.href='details.html?id='+id;
            },

            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },

        }

    })
</script>

<script>
    slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
    radius = slideW*0.5/Math.sin(Math.PI/16);//半径。圆心并不是视点中心，视点在1200px

    carouselSwiper = new Swiper('#carousel .swiper', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: false,
        loop: true,
        loopedSlides: 4,
        grabCursor:true,
//	autoplay: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            //clickable :true,
        },
        on: {
            progress: function(swiper, progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    translateX = (slideProgress+1.5)*( slideW/3 - Math.cos((slideProgress+1.5)*0.125*Math.PI)*slideW*1.1/3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
                    rotateY = (slideProgress+1.5)*22.5 ;//图片角度
                    translateZ = ( radius - Math.cos((slideProgress+1.5)*0.125*Math.PI)*radius - 150) + 'px';//调整图片远近，刚好4个在画框内
                    slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

                }
            },
            setTransition: function(swiper, transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }

    })
</script>
</body>
</html>
